<div><span class="btn btn-primary" id="upload-slide">增加一个轮播图</span></div>
<form action="" class="form-inline" role="form" id="form">
  <table class="table table-hover">
    <thead>
      <tr>
        <th>轮播图名称</th>
        <th>轮播图链接地址</th>
        <th>轮播图图片</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <volist name="product.slide_images" id="vo" key="slideIndex">
      <tr>
        <td>
          <div class="form-group">
            <input type="text" class="form-control" name="slide_images[{$slideIndex}][title]" placeholder="" value="{$vo.title}">
          </div>
        </td>
        <td>
          <div class="form-group">
            <input type="text" class="form-control" name="slide_images[{$slideIndex}][url]" placeholder="" value="{$vo.url}">
          </div>
        </td>
        <td>
          <div class="images"><img src="{$vo.img}" /></div>
          <input type='hidden' name='slide_images[{$slideIndex}][img]' value='{$vo.img}'>
        </td>
        <td>
          <a class="btn btn-danger btn-xs">删除</a>
        </td>
      </tr>
      
      </volist>
    </tbody>
  </table>
  <div class="margin-top text-center"><a class="btn btn-primary" id="slide-post">提交更改</a></div>
</form>
<div class="pagination">{$pagination}</div>

<style>
  .images{width:150px; height:100px; max-height:100px; overflow:hidden; }
  .images > img{width:100%;}
</style>

<!-- uploadify -->
<link rel="stylesheet" href="__PUBLIC__/Style/Common/uploadify/uploadify.css">
<script type="text/javascript" src="__PUBLIC__/Style/Common/uploadify/jquery.uploadify.min.js?{:rand(0,9999)}"></script>
<script type="text/javascript">

var index = "{$slideIndex}"*1;
$(function() {
  
  $("#upload-slide").uploadify({
    'multi'      :  false,
    'buttonClass'  :  'margin-bottom',
    'fileSizeLimit' :   '200kb',
    'buttonText'  :  '增加一个轮播图',
    'fileTypeDesc'   :   'Image Files',
    'fileTypeExts'   :   '*.jpg; *.png',
    'swf'      :   '__PUBLIC__/Style/Common/uploadify/uploadify.swf',
    'uploader'    :   '{:U("Upload/uploadOne")}',
    'onUploadSuccess'  : function(data, res){
      var url = eval("(" + res + ")").extra.url;
      index ++;
      var html = "<tr><td><div class='form-group'><input type='text' class='form-control' name='slide_images[" + index + "][title]' placeholder='请输入图片标题'></div></td>"
                +"<td><div class='form-group'><input type='text' class='form-control' name='slide_images[" + index + "][url]' placeholder='请输入链接地址'></div></td>"
                +"<td><div class='images'><img src='"+url+"'/></div><input type='hidden' name='slide_images[" + index + "][img]' value='"+url+"'></td>"
                +"<td><a class='btn btn-danger btn-xs'>删除</a></td>"
                +"</tr>";
      $("tbody").append(html);
    }
  });
  
  $("tbody").delegate("a.btn-danger", "click", function(){
    $(this).parent().parent().remove();
  });
  
  $("#slide-post").click(function(){
    
    var postData = $("#form").serialize();
    var _this = this;
    
    $.post("__CONTROLLER__/indexPost", postData, function(data){
      
      $(_this).attr("disabled", true);

      if(data.error == 1){
        $().alertMsg({type: "danger", msg: data.msg});
      }else if(data.error == 0){
        $().alertMsg({type: "success", msg: data.msg});
      }
      $(_this).removeAttr("disabled");
      return false;
    })
  });
});
</script>